<template>
  <div class="myShopCollection">
    <myHead :title="$route.query.data"></myHead>
    <div class="empty" v-if="empty">
      <img src="../../../static/img/shopno001.png" alt="">
      <p>{{$route.query.data=='商品收藏'?'您还没有收藏商品喔~':'您还没有浏览记录喔~'}}</p>
    </div>
    <div class="wrap">
      <van-swipe-cell :before-close="beforeClose" v-for="(x,y) in itemList" :key="y" class="lqitem" :name="y"  :stop-propagation="true">
        <div class="item" @click="jump(x)">
          <div class="item_left">
            <img :src="$store.state.imgurlApi+x.image" alt="">
          </div>
          <div class="item_right">
            <p class="item_name">{{x.title}}</p>
            <div class="item_type"><p v-for="r in ['炸鸡鸡串','优惠快餐']">{{r}}</p></div>
            <div class="item_bq"><p v-for="u in ['满减优惠','9折促销']">{{u}}</p></div>
            <div class="item_money"><p><span style="font-size: .15rem">￥</span>{{x.price}}&ensp;<span>￥{{x.original_price}}</span></p><p>{{$route.query.data=='商品收藏'?x.likes:x.views}}人{{$route.query.data=='商品收藏'?'收藏':'浏览'}}</p></div>
          </div>
        </div>
        <template #right>
          <van-button square text="取消收藏" type="danger" class="delete-button"/>
        </template>
      </van-swipe-cell>
    </div>
    <!--  询问弹窗  -->
    <van-dialog v-model="removeShow" title="确定取消收藏吗？" show-cancel-button width="3.2rem" @confirm="confirm"></van-dialog>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  import Vue from 'vue';
  import { SwipeCell } from 'vant';
  import { Button } from "vant";
  import { Dialog } from 'vant';

  Vue.use(SwipeCell);
  Vue.use(Dialog);
  Vue.use(Button);
  export default {
    name: "myShopCollection",
    data(){
      return {
        itemList:[],
        removeShow:false,
        state:'no',
        empty:false
      }
    },
    components:{
      myHead
    },
    beforeCreate(){
      if (this.$route.query.data == '商品收藏') {
        // 请求收藏商品列表
        this.$myAxios('index/collect_details/collect_goods','post',{
          user_id:this.$myStorage.query()
        }).then(res=>{
          if (res.data.state == 1) {
            this.$nextTick(()=>{
              this.itemList = res.data.collect_goods;
              if (this.itemList.length<1) {
                this.empty = true;
              } else {
                this.empty = false;
              }
            })
          } else {
            this.$myNotice('网络出现了问题~');
          }
        })
      }

    },
    methods:{
      confirm(){
        if (this.$route.query.data=='浏览记录') {return}
        if (this.state != 'no') {
          this.$myAxios('index/Collect/collect_shop_add','post',{
            user_id: this.$myStorage.query(),
            goods_id: this.itemList[this.state].id,
            type_form:'delete'
          }).then(res=>{
            if (res.data.state == 1) {
              this.itemList.splice(this.state,1);
              if (this.itemList.length<1) {
                this.empty = true;
              } else {
                this.empty = false;
              }
              // 更新用户资料
              this.$store.commit('obtainUserInfo',this.$myStorage.query())
            }else  {
              this.$myNotice('请检查网络~',1500)
            }
          });
        }
      },
      beforeClose({ position, instance }) {
        switch (position) {
          case 'left':
          case 'cell':
          case 'outside':
            instance.close();
            break;
          case 'right':
            this.removeShow = true;
            this.state = instance.name;
            break;
        }
      },
      jump(x){
        this.$router.push({
          name:"details",
          query:{
            id:x.id
          }
        })
      }
    }
  }
</script>

<style scoped>
  .myShopCollection{
    width: 100%;
    min-height: 6.67rem;
    box-sizing: border-box;
    padding-top: .5rem;
    background-color: #F5F5F5;
  }

  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }

  .item {
    width: 100%;
    height: 1.2rem;
    box-sizing: border-box;
    padding: .1rem .15rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
  }
  .lqitem {
    margin-bottom: .1rem;
  }
  .item_left {
    width: 1rem;
    height: 1rem;
    margin-right: .1rem;
  }
  .item_left>img {
    width: 100%;
  }
  .item_right {
    width: calc(100% - 1.1rem);
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .item_name {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
  }
  .item_type,.item_bq {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .item_type>p {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:400;
    color: #999999;
    margin-right: .1rem;
  }
  .item_bq>p {
    background:rgba(255,143,44,.3);
    border-radius:.08rem;
    padding: 0 .05rem;
    text-align: center;
    line-height: .15rem;
    font-size:.09rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FF8B28;
    margin-right: .1rem;
  }
  .item_money {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .item_money>p:nth-child(1) {
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .item_money>p:nth-child(2) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }
  .item_money>p:nth-child(1)>span:nth-child(2) {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    text-decoration:line-through;
    color: #999999;
  }


/* 删除按钮 */
  >>> .van-swipe-cell__right>.van-button--normal {
    padding: 0 .15rem;
    font-size: .14rem;
  }
  >>> .van-swipe-cell__right>.van-button--danger {
    border: .01rem solid #ee0a24;
  }
  >>> .van-swipe-cell__right>.van-button {
    line-height: .35rem;
  }
  >>>.delete-button .van-button__content .van-button__text {
    writing-mode: vertical-lr;
    writing-mode: tb-lr;
  }

  /* 弹窗 */
  /deep/ .van-dialog {
    font-size: .16rem !important;
    border-radius: .16rem !important;
    width: 3.2rem !important;

  }
  >>> .van-button--large {
    line-height: .48rem;
    height: .5rem;
  }
  >>> .van-button {
    font-size: .16rem;
    border-radius: .02rem;
  }
  >>> .van-dialog__header {
    line-height: .24rem;
  }
  >>> .van-dialog__header--isolated {
    padding: .24rem 0;
  }
  >>> .van-swipe-cell__right .van-button__content {
    width: .35rem;
  }

  .empty {
    display: flex;
    flex-flow: column;
    align-items: center;
    padding-top: .3rem;
  }
  .empty>img {
    width: 70%;
    margin-bottom: .3rem;
  }
  .empty>p {
    font-size: .16rem;
    color: #999999;
  }
</style>
